<template>
  <div class="home">
    <nav-bar class="nav">
      <div class="left" slot="left">
        <router-link to="/sort"><img src="../assets/menu.png" /></router-link>
      </div>
      <div class="center" slot="center">
        <router-link to="/search">
          <search-view>
            <template v-slot:left>
              <img src="../assets/logo.png" id="img1" />
              <img src="../assets/search.png" />
            </template>
          </search-view>
        </router-link>
      </div>
      <div class="right" slot="right">
        <router-link to="/login"> <p>登录</p></router-link>
      </div>
    </nav-bar>
    <div class="rotation">
      <div
        class="imgs"
        v-for="(img, index) in imgs"
        :key="img.id + '-only'"
        v-show="index == currentIndex"
      >
        <img :src="img.path" />
      </div>
      <div class="radios" v-for="(item, index) in imgs" :key="item.id">
        <input type="button" @click="setTime(index)" name="rotation" />
      </div>
    </div>
    <div class="sorts">
      <div class="sort" v-for="item in sorts" :key="item.path">
        <img :src="item.path" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="miaoSha">
      <div class="navBar">
        <span class="left">京东秒杀</span>
        <span class="center">{{ this.date }}</span>
        <span class="right">更多秒杀></span>
      </div>
      <div class="items">
        <div class="photos" v-for="photo in photos" :key="photo.path">
          <img :src="photo.path" /><span>¥{{ photo.price }}</span>
        </div>
      </div>
    </div>
    <div class="wares">
      <div
        class="goods"
        v-for="(img, index) in wares"
        :key="img.img"
        @click="ware_index = index"
      >
        <div slot="head">
          <router-link to="/goods"
            ><img :src="img.img" @click="getIndex(index)"
          /></router-link>
        </div>
        <div slot="bottom" class="bottom">
          <span class="name">{{ img.name }}</span>
          <span class="price">¥{{ img.price }}</span>
          <span class="comments">{{ img.comments }}</span>
          <input type="button" value="看相似" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "../components/navBar.vue";
import searchView from "../components/search.vue";
import goodsView from "../components/goods.vue";
export default {
  data() {
    return {
      imgs: [
        {
          id: "1",
          path: require("../assets/rotation_1.jpg"),
        },
        {
          id: "2",
          path: require("../assets/rotation_2.jpg"),
        },
        {
          id: "3",
          path: require("../assets/rotation_3.jpg"),
        },
        {
          id: "4",
          path: require("../assets/rotation_4.jpg"),
        },
      ],
      sorts: [
        {
          path: require("../assets/sort_1.png"),
          name: "京东超市",
        },
        {
          path: require("../assets/sort_2.png"),
          name: "数码电器",
        },
        {
          path: require("../assets/sort_3.png"),
          name: "京东服饰",
        },
        {
          path: require("../assets/sort_4.png"),
          name: "京东生鲜",
        },
        {
          path: require("../assets/sort_5.png"),
          name: "京东到家",
        },
        {
          path: require("../assets/sort_6.png"),
          name: "充值缴费",
        },
        {
          path: require("../assets/sort_7.png"),
          name: "物流查询",
        },
        {
          path: require("../assets/sort_8.png"),
          name: "领券",
        },
        {
          path: require("../assets/sort_9.png"),
          name: "领金贴",
        },
        {
          path: require("../assets/sort_10.png"),
          name: "PLUS会员",
        },
      ],
      photos: [
        {
          path: require("../assets/photo_1.png"),
          price: "17.9",
        },
        {
          path: require("../assets/photo_2.png"),
          price: "17.8",
        },
        {
          path: require("../assets/photo_3.png"),
          price: "9.9",
        },
        {
          path: require("../assets/photo_4.png"),
          price: "12.9",
        },
        {
          path: require("../assets/photo_5.png"),
          price: "416",
        },
        {
          path: require("../assets/photo_6.png"),
          price: "9.9",
        },
        {
          path: require("../assets/photo_7.png"),
          price: "35.8",
        },
        {
          path: require("../assets/photo_8.png"),
          price: "73",
        },
        {
          path: require("../assets/photo_9.png"),
          price: "309",
        },
      ],
      wares: [
        {
          img: require("../assets/goods_1.png"),
          name: "清扬(CLEAR)洗发露 控油平衡型(去屑+控油)500g洗发水 (氨基酸洗发)",
          price: "47.90",
          comments: "2000+条评论",
        },
        {
          img: require("../assets/goods_2.png"),
          name: "紫光园 麻酱烧饼 火烧芝麻酱烧饼 清真食品早餐空气炸锅食材 北京特产 麻酱烧饼280g*2袋（8个）",
          price: "36.80",
          comments: "5000+条评论",
        },
        {
          img: require("../assets/goods_3.png"),
          name: "初屋 餐桌 实木岩板餐桌现代简约家用小户型大理石餐桌椅组合可伸缩折叠圆桌圆形吃饭桌子 1.35米黑白色【12MM雪山白岩板】 单餐桌",
          price: "1380.00",
          comments: "2万+条评论",
        },
        {
          img: require("../assets/goods_4.png"),
          name: "骏德 衣柜推拉门 简易木质小衣柜衣橱简约现代推拉门衣柜 木 浅胡桃色 A款长80cm宽45cm高180cm",
          price: "238.00",
          comments: "4000+条评论",
        },
        {
          img: require("../assets/goods_5.png"),
          name: "德运 (Devondale) 澳大利亚原装进口 全脂成人奶粉1kg袋装 调制乳奶粉 学生青少年中老年奶粉",
          price: "61.00",
          comments: "8000+条评论",
        },
        {
          img: require("../assets/goods_6.png"),
          name: "御泥坊套装 美白嫩肤补水护肤品套装化妆品水乳女送礼 洗面奶水乳液睡膜面膜眼膜贴素颜霜",
          price: "269.90",
          comments: "1万+条评论",
        },
      ],
      currentIndex: 0,
      time: 0,
      date: 0,
      ware_index: 0,
    };
  },
  components: {
    navBar,
    searchView,
    goodsView,
  },
  mounted() {
    this.play();
    this.getDate();
  },
  methods: {
    autoSwiper() {
      this.currentIndex++;
      if (this.currentIndex == 4) this.currentIndex = 0;
    },
    play() {
      this.time = setInterval(() => {
        this.autoSwiper();
      }, 3000);
    },
    setTime(index) {
      console.log(index);
      this.currentIndex = index * 1;
      clearInterval(this.time);
      this.play();
    },
    getDate() {
      let h = "00",
        m = 59,
        s = 59,
        t = setInterval(() => {
          s--;
          if (s == 0) {
            m--;
            s = 59;
          } else if (m == 0 && s == 0) {
            clearInterval(t);
            this.getDate();
          }
          return (this.date = h + ":" + m + ":" + s);
        }, 1000);
    },
    getIndex(index) {
      this.$bus.$emit("getIndex", {
        currentIndex: index,
      });
    },
    getWare() {
      this.$bus.$emit("getWare", {
        ware: this.wares,
      });
    },
  },
};
</script>
<style scoped>
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.home {
  background-color: rgb(246, 246, 246);
}
.nav {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 45px;
  background-color: rgb(228, 49, 48);
  z-index: 100;
}
.nav .left {
  position: relative;
  width: 20px;
  padding-left: 15px;
  padding-top: 13px;
}
.nav .left img {
  width: 20px;
}
.nav .center {
  position: relative;
  margin-left: 70px;
  margin-top: -27px;
}
.nav .right {
  position: relative;
  float: right;
  margin-top: -25px;
  margin-right: 10px;
}
.nav .right a {
  color: white;
  text-decoration: none;
}
.rotation {
  position: absolute;
  top: 45px;
  width: 100%;
  height: 122px;
  background-color: rgb(246, 246, 246);
}
.rotation .imgs {
  position: relative;
  top: 1px;
  margin-left: 10px;
  width: 300px;
  height: 120px;
  overflow: hidden;
  border-radius: 15px;
}
.rotation .imgs img {
  width: 300px;
  height: 120px;
}
.rotation .radios {
  position: relative;
  width: 14px;
  text-align: center;
  float: left;
  margin-top: -20px;
}
.rotation .radios input {
  margin-left: 135px;
  width: 8px;
  height: 8px;
  border: none;
  background-color: black;
  border-radius: 8px;
  opacity: 50%;
}
.sorts {
  position: relative;
  margin-top: 167px;
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(246, 246, 246);
}
.sorts .sort {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 8px;
  margin-left: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.sorts .sort img {
  width: 40px;
}
.miaoSha {
  position: relative;
  display: flex;
  align-items: center;
  flex-flow: column;
  background-color: rgb(255, 255, 255);
  width: 90%;
  overflow: hidden;
  height: 100px;
  border-radius: 10px;
  margin-left: 15px;
  margin-top: 10px;
}
.miaoSha .navBar {
  width: 100%;
  height: 40px;
}
.miaoSha .navBar .left {
  float: left;
  margin-left: 8px;
  margin-top: 5px;
  font-size: 14px;
}
.miaoSha .navBar .center {
  position: relative;
  float: left;
  margin-left: 35px;
  margin-top: 5px;
  height: 20px;
  width: 70px;
  text-align: center;
  background-color: rgb(253, 81, 65);
  color: white;
  border-radius: 7px;
}
.miaoSha .navBar .right {
  color: red;
  margin-top: 5px;
  margin-right: 8px;
  font-size: 12px;
  float: right;
}
.miaoSha .items {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  flex-flow: row;
}
.miaoSha .items .photos {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding-right: 5px;
  height: 60px;
  width: 60px;
}
.miaoSha .items .photos img {
  width: 45px;
}
.miaoSha .items .photos span {
  color: red;
  font-size: 10px;
}
.wares {
  height: 837px;
}
.goods {
  margin-left: 10px;
  margin-top: 10px;
}
.goods .bottom {
  padding: 2px 2px 2px 2px;
  display: flex;
  flex-flow: column;
}
.goods .name {
  width: 100%;
  height: 35px;
  overflow: hidden;
}
.goods .price {
  font-size: 20px;
  color: red;
  margin-top: 20px;
  margin-left: 5px;
}
.goods .comments {
  margin-left: 5px;
}
.goods .bottom input {
  background-color: rgb(246, 246, 246);
  font-size: 10px;
  width: 45px;
  border-radius: 10px;
  border: none;
  margin-left: 93px;
  margin-top: -15px;
}
</style>
